<template>
  <el-autocomplete
    :fetch-suggestions="querySearchAsync"
    placeholder="请输入"
    v-model="person"
    clearable
    @select="handleSelect"
    @clear="handleClear"
    :size="size"
    :disabled="disabled"
    class="person-search"
  >
    <i class="el-icon-search el-input__icon" slot="suffix"> </i>
    <template slot-scope="{ item }">
      <show-person :personInfo="item" />
    </template>
  </el-autocomplete>
</template>

<script>
import { getPersonInfo } from "@/http/api";
import showPerson from "./showPerson.vue";
export default {
  name: "PersonSearch",
  components: { showPerson },
  props: ["size", "value", "disabled"],
  data() {
    return {
      person: "",
    };
  },
  mounted() {
    this.person = this.value?.employee_name;
    if (this.person && Object.keys(this.person).length === 0) {
      this.person = "";
    }
  },
  watch: {
    value: function (newVal) {
      this.person = newVal
        ? newVal.employee_name
          ? newVal.employee_name
          : newVal
        : "";
      if (newVal && Object.keys(newVal).length === 0) {
        this.person = "";
      }
    },
  },
  methods: {
    async querySearchAsync(queryString, cb) {
      if (queryString && queryString.trim()) {
        let res = await getPersonInfo(queryString);
        if (res.code === 20041) {
          cb(res.data);
        }
      } else {
        cb([]);
      }
    },
    handleSelect(item) {
      this.$emit("input", item);
    },
    handleClear() {
      this.$emit("input", "");
    },
  },
};
</script>

<style lang="less" scoped>
.person {
  display: flex;
  align-items: center;
  .avator {
    width: 40px;
    height: 40px;
    background-color: blueviolet;
    border-radius: 50%;
    margin-right: 6px;
  }
  .details {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    div {
      font-size: 16px;
      line-height: 16px;
      padding-bottom: 4px;
    }
    span {
      font-size: 14px;
      line-height: 14px;
    }
  }
}
</style>
